<template>
  <div>
    <el-card class="card_box_commodity_information">
      <!--顶部返回框-->
      <el-page-header @back="goBack" :content="commodityInformation.text"></el-page-header>

      <el-row>

        <!--左卡片-->
        <el-col :span="10">
          <el-card class="left_card" shadow="hover">
            <div>
              <el-image
                  style="width: 100%; height: 380px; margin-top: 20px"
                  :src="handlerImg(commodityInformation.picture)"
                  fit="fill"></el-image>
            </div>
          </el-card>
        </el-col>

        <!--右卡片-->
        <el-col :span="14">
          <el-card class="right_card" shadow="hover">
            <h3>{{ commodityInformation.text }}</h3>
            <el-row>
              <el-col :span="5">
                <span style="font-size: 30px;color: #F56C6C;font-weight:bold">￥{{ commodityInformation.price }}</span>
              </el-col>
              <el-col :span="14" style="margin-top: 6px">
                <el-tag style="margin-left: 30px">{{ commodityInformation.type }}</el-tag>
              </el-col>
              <el-col :span="5" style="margin-top: 18px">
                <span  style="margin-left: 240px ">历史销量&nbsp;&nbsp;&nbsp;{{ commodityInformation.historicalSaleCount }}</span>
              </el-col>
            </el-row>


            <el-divider></el-divider>

            <el-card shadow="never">
              <el-row style="margin-top: 5px">
                <el-col :span="6">
                  <span style="font-weight: bold;font-size: 18px">餐厅名称</span>
                </el-col>
                <el-col :span="6" style="margin-top: -2px">
                  <span style="font-size: 23px;color: #F56C6C">{{ this.restaurantName }}</span>
                </el-col>
              </el-row>

              <el-row style="margin-top: 5px">
                <el-col :span="6">
                  <span style="font-weight: bold;font-size: 18px">美食评价</span>
                </el-col>

                <el-col :span="8">
                  <el-rate
                      v-model="commodityInformation.appraiseScore"
                      disabled
                      show-score
                      text-color="#ff9900">
                  </el-rate>
                </el-col>

              </el-row>

              <el-row style="margin-top: 5px">
                <el-col :span="6">
                  <span style="font-weight: bold;font-size: 18px">库存</span>
                </el-col>
                <el-col :span="6">
                  <span>{{ commodityInformation.saleCount }}</span>
                </el-col>
              </el-row>

              <el-row style="margin-top: 5px">
                <el-col :span="6">
                  <span style="font-weight: bold;font-size: 18px">购买人数</span>
                </el-col>
                <el-col :span="6">
                  <span>{{ commodityInformation.peopleBuy }}</span>
                </el-col>
              </el-row>

            </el-card>
          </el-card>
        </el-col>
      </el-row>

    </el-card>
  </div>
</template>

<script>
import {getCommodityById} from "@/api/user/commodity/userCommodity";
import {selectInformationByCommodityId} from "@/api/merchant/commodity/comment";

export default {
  name: "CommodityInformation",

  props:["commodityId","restaurantId","restaurantName"],

  // 监听属性 类似于data概念
  computed: {
    classOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动)
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },

  data() {
    return {

      /**
       * 美食信息
       */
      commodityInformation: {},

      /**
       * 购买美食的用户
       */
      user: undefined,

      /**
       * 针对当前商品的评价内容
       */
      commodityComments:[]
    }
  },

  created() {
    this.getCommentList();
    this.getCommodityInformation();
  },

  methods: {
    /**
     *返回餐厅首页
     */
    goBack() {
      this.$router.push({
        name:"restaurantWebsiteInformation",
        params:{
          restaurantId:this.restaurantId,
          restaurantName:this.restaurantName
        }
      });
    },

    /**
     * 获取当前美食信息
     */
    getCommodityInformation() {

      const formData = new FormData();

      formData.append("id", this.commodityId);

      getCommodityById(formData).then(res => {
        this.commodityInformation = res.commodity;

      }).catch(() => {
        this.$message({
          message: "error",
          type: "error"
        })
      })

    },

    /**
     * 展示图片
     */
    handlerImg(picture){
      return "data:image/jpeg;base64," + picture;
    },

    /**
     * 获得评论列表
     */
    getCommentList() {
      const formData=new FormData();

      formData.append("commodityId", this.commodityId);

      selectInformationByCommodityId(formData).then(res=>{
        this.commodityComments=res.information;
      })

    },
  }
}
</script>

<style lang="less">
.card_box_commodity_information{
  height: 86vh;
}

.left_card {
  margin-top: 20px;
  height: 480px;
}

.right_card {
  height: 480px;
  margin-top: 20px;
  margin-right: 20px;
  margin-left: 10px;
}

//.el-divider--horizontal {
//  margin-top: 10px;
//  margin-bottom: 10px;
//  width: 100%;
//}

/* el-divider 修改高度&虚线效果 */
div[class="el-divider el-divider--horizontal"]{
  margin: 15px 0px 20px 0px;
  background-color: #DCDFE6;
  //border-top: 1px dashed #e8eaec;
}

.el-dialog__body {
  padding: 10px 10px;
}

.card_show_commodity_information {
  margin: 0 auto;
  width: 100vh;
  height: auto;
  text-align: center;
}

div .el-page-header__content{
  display: block;
  text-align: center;
  font-size: 35px;
  font-weight: bold;
  font-family: "楷体";
}
</style>
